<template>
  <div class="image-gallery">
    <div class="menu-container">
      <el-menu
        :default-active="activeCategory"
        mode="horizontal"
        class="category-menu"
        @select="handleSelect"
      >
        <el-menu-item
          v-for="(category, index) in categories"
          :key="index"
          :index="category.name"
        >
          {{ category.name }}
        </el-menu-item>
      </el-menu>
    </div>

    <div class="image-container">
      <el-card
        v-if="selectedCategory"
        :body-style="{ padding: '0px' }"
        class="box-card"
        shadow="never"
      >
        <div class="category-header">
          <h3>{{ selectedCategory.name }}</h3>
        </div>
        <div class="image-list">
          <div
            v-for="(image, imgIndex) in selectedCategory.images"
            :key="imgIndex"
            class="image-item"
          >
            <el-image
              :src="image.url"
              fit="cover"
              class="image"
            />
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        {
          name: "自然",
          images: [
            { url: "https://example.com/nature1.jpg" },
            { url: "https://example.com/nature2.jpg" },
            { url: "https://example.com/nature3.jpg" },
          ],
        },
        {
          name: "城市",
          images: [
            { url: "https://example.com/city1.jpg" },
            { url: "https://example.com/city2.jpg" },
            { url: "https://example.com/city3.jpg" },
          ],
        },
        {
          name: "动物",
          images: [
            { url: "https://example.com/animal1.jpg" },
            { url: "https://example.com/animal2.jpg" },
            { url: "https://example.com/animal3.jpg" },
          ],
        },
      ],
      activeCategory: "自然",
      selectedCategory: null,
    };
  },
  methods: {
    handleSelect(index) {
      this.activeCategory = index;
      this.selectedCategory = this.categories.find((cat) => cat.name === index);
    },
  },
  mounted() {
    this.selectedCategory = this.categories.find(
      (cat) => cat.name === this.activeCategory
    );
  },
};
</script>

<style scoped>
.image-gallery {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 1.5rem;
  background-color: #fff;
  border-radius: 8px;
}

.menu-container {
  margin-bottom: 1.5rem;
}

.category-menu {
  display: flex;
  justify-content: center;
  border-bottom: none;
}

.category-menu .el-menu-item {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  color: #666;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.category-menu .el-menu-item:hover {
  color: #333;
  background-color: transparent;
}

.category-menu .el-menu-item.is-active {
  color: #333;
  border-bottom-color: #333;
  font-weight: 500;
}

.image-container {
  flex: 1;
}

.box-card {
  border: none;
}

.category-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #f0f0f0;
}

.category-header h3 {
  font-size: 1.25rem;
  font-weight: 500;
  color: #333;
  margin: 0;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.5rem;
}

.image-item {
  flex: 1 1 calc(33.33% - 1rem);
  min-width: 200px;
}

.image {
  width: 100%;
  height: 180px;
  border-radius: 4px;
  transition: opacity 0.3s ease;
}

.image:hover {
  opacity: 0.9;
}
</style>
